<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>Kotlin Spring Validation</title>

    <script crossorigin="anonymous"
            integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
            src="https://code.jquery.com/jquery-3.2.1.js"></script>

    <!-- Latest compiled and minified CSS & JS -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" media="screen" rel="stylesheet"/>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron">
    <div class="container">
        <h1>Welcome to Kotlin</h1>
        <p>This demonstrates Spring Validation with Kotlin</p>
        <form action="POST" method="post" role="form" th:action="@{/index}" th:object="${user}">
            <legend>Enter Registration Information Here</legend>

            <div th:class="${#fields.hasErrors('firstName') ?'form-group has-error' : 'form-group'}">
                <label class="col-sm-2 control-label" for="first_name">First Name</label>
                <div class="col-sm-10">
                    <input class="form-control" id="first_name" placeholder="First Name..." th:field="*{firstName}"
                           type="text"/>
                    <span class="help-block" th:each="err: ${#fields.errors('firstName')}" th:text="${err}"></span>
                </div>
            </div>
            <div th:class="${#fields.hasErrors('lastName') ?'form-group has-error' : 'form-group'}">
                <label class="col-sm-2 control-label" for="last_name">Last Name</label>
                <div class="col-sm-10">
                    <input class="form-control" id="last_name" placeholder="Last Name..." th:field="*{lastName}"
                           type="text"/>
                    <span class="help-block" th:each="err: ${#fields.errors('lastName')}" th:text="${err}"></span>
                </div>
            </div>
            <div th:class="${#fields.hasErrors('email') ?'form-group has-error' : 'form-group'}">
                <label class="col-sm-2 control-label" for="email">Email</label>
                <div class="col-sm-10">
                    <input class="form-control" id="email" placeholder="Email Address..." th:field="*{email}"
                           type="text"/>
                    <span class="help-block" th:each="err: ${#fields.errors('email')}" th:text="${err}"></span>
                </div>
            </div>
            <div th:class="${#fields.hasErrors('phone') ?'form-group has-error' : 'form-group'}">
                <label class="col-sm-2 control-label" for="phone_number">Phone Number</label>
                <div class="col-sm-10">
                    <input class="form-control" id="phone_number" placeholder="Phone Number..." th:field="*{phone}"
                           type="text"/>
                    <span class="help-block" th:each="err: ${#fields.errors('phone')}" th:text="${err}"></span>
                </div>
            </div>
            <div th:class="${#fields.hasErrors('address') ?'form-group has-error' : 'form-group'}">
                <label class="col-sm-2 control-label" for="address">Street Address</label>
                <div class="col-sm-10">
                    <input class="form-control" id="address" placeholder="Street Address..." th:field="*{address}"
                           type="text"/>
                    <span class="help-block" th:each="err: ${#fields.errors('address')}" th:text="${err}"></span>
                </div>
            </div>
            <div th:class="${#fields.hasErrors('city') ?'form-group has-error' : 'form-group'}">
                <label class="col-sm-2 control-label" for="city">City</label>
                <div class="col-sm-10">
                    <input class="form-control" id="city" placeholder="City..." th:field="*{city}" type="text"/>
                    <span class="help-block" th:each="err: ${#fields.errors('city')}" th:text="${err}"></span>
                </div>
            </div>
            <div th:class="${#fields.hasErrors('province') ?'form-group has-error' : 'form-group'}">
                <label class="col-sm-2 control-label" for="province">Province</label>
                <div class="col-sm-10">
                    <input class="form-control" id="province" placeholder="Province..." th:field="*{province}"
                           type="text"/>
                    <span class="help-block" th:each="err: ${#fields.errors('province')}" th:text="${err}"></span>
                </div>
            </div>
            <div th:class="${#fields.hasErrors('zip') ?'form-group has-error' : 'form-group'}">
                <label class="col-sm-2 control-label" for="zip">Zip Code</label>
                <div class="col-sm-10">
                    <input class="form-control" id="zip" placeholder="Zip..." th:field="*{zip}" type="text"/>
                    <span class="help-block" th:each="err: ${#fields.errors('zip')}" th:text="${err}"></span>
                </div>
            </div>

            <button class="btn btn-primary" type="submit">Submit</button>
        </form>
    </div>
</div>
</body>
</html>